<template>
    <div class="main-box">
<!--        <search-form @search="getDataList"></search-form>-->
        <div class="title">{{chooseMonth}}月评估报告分析</div>
        <div style="height:700px;">
            <RelationGraph ref="graphRef" :options="graphOptions" :on-node-click="onNodeClick" :on-line-click="onLineClick" />
        </div>
    </div>
</template>

<script>
// relation-graph也支持在main.js文件中使用Vue.use(RelationGraph);这样，你就不需要下面这一行代码来引入了。
import RelationGraph from 'relation-graph'
import SearchForm from "@/views/modules/report/search-form.vue";
export default {
    name: 'Demo',
    components: {SearchForm, RelationGraph },
    data() {
        return {
            chooseMonth: "",
            graphOptions: {
                "backgroundImage": "https://ssl.relation-graph.com/images/relatioon-graph-canvas-bg.png",
                "backgroundImageNoRepeat": true,
                "defaultNodeBorderWidth": 5,
                "defaultLineColor": "rgba(30, 144, 255, 1)",
                "defaultLineWidth": 2,
                "defaultLineShape": 6,
                "defaultNodeShape": 1,
                "defaultNodeWidth": 200,
                "defaultNodeHeight": 100,
                "defaultJunctionPoint": "lr",
                "layouts": [
                    {
                        "label": "中心",
                        "layoutName": "tree",
                        "centerOffset_x": 0,
                        "centerOffset_y": 0,
                        "distance_coefficient": 1,
                        "layoutDirection": "h",
                        "from": "left",
                        "levelDistance": "",
                        "min_per_width": 100,
                        "max_per_width": 500,
                        "min_per_height": 300,
                        "max_per_height": 500
                    }
                ]
            }
        }
    },
    activated() {
        this.chooseMonth = sessionStorage.wnvMonth
        this.showGraph()

    },
    methods: {
        getDataList(){

        },
        showGraph() {
            this.$http({
                url: this.$http.adornUrl(`/admin/wnv/queryWnvReport`),
                method: 'post',
                data: this.$http.adornData({
                    wnvMonth: sessionStorage.wnvMonth
                })
            }).then(({ data }) => {
                console.log('🚀 ~ 查询是否有', data)

                let jsonData = {
                    "rootId": "wendu",
                    "nodes": [],
                    "lines": []
                }
                jsonData.nodes.push({
                    "id": "wnv",
                    "text": "WNV风险程度" + "【" + data.wnvMain.wnvResult + "】",
                })
                data.wnDtlListL1.forEach((item) => {
                    jsonData.nodes.push({
                        "id": item.indexId,
                        "text": item.indexDesc,
                    })
                })
                data.wnDtlListL2.forEach((item) => {
                    if(item.indexDesc === "温度"){
                        jsonData.nodes.push({
                            "id": "wendu",
                            "text": item.indexDesc + "【" + item.indexOptions + "】",
                        })
                    }else{
                        jsonData.nodes.push({
                            "id": item.indexId,
                            "text": item.indexDesc + "【" + item.indexOptions + "】",
                        })
                        let findResult = data.wnDtlListL1.find((parent) => {
                            return item.preindexId === parent.indexId
                        })

                        jsonData.lines.push({
                            "from": findResult.indexId,
                            "to": item.indexId
                        })
                        jsonData.lines.push({
                            "from": item.indexId,
                            "to": "wendu"
                        })
                    }
                })
                data.wnDtlListL3.forEach((item) => {
                    jsonData.nodes.push({
                        "id": item.indexId,
                        "text": item.indexDesc + "【" + item.indexOptions + "】",
                    })
                    jsonData.lines.push({
                        "from": "wendu",
                        "to": item.indexId
                    })
                    jsonData.lines.push({
                        "from": item.indexId,
                        "to": "wnv"
                    })
                })
                data.wnDtlListLC.forEach((item) => {
                    jsonData.nodes.push({
                        "id": item.indexId,
                        "text": item.indexDesc + "【" + item.indexOptions + "】",
                    })
                    jsonData.lines.push({
                        "from": item.indexId,
                        "to": "wnv"
                    })
                })
                this.$refs.graphRef.setJsonData(jsonData, (graphInstance) => {
                    // Called when the relation-graph is completed
                })
            })

            const jsonData = {
                "rootId": "w",
                "nodes": [
                    {
                        "id": "a",
                        "text": "气候因素",
                    },
                    {
                        "id": "b",
                        "text": "生态因素",
                    },
                    {
                        "id": "c",
                        "text": "地理因素",
                    },
                    {
                        "id": "a-1",
                        "text": "光照",
                    },
                    {
                        "id": "a-2",
                        "text": "气压",
                    },
                    {
                        "id": "b-1",
                        "text": "植被类型",
                    },
                    {
                        "id": "b-2",
                        "text": "食物数量",
                    },
                    {
                        "id": "c-1",
                        "text": "土地利用类型",
                    },
                    {
                        "id": "c-2",
                        "text": "水体分布",
                    },
                    {
                        "id": "w",
                        "text": "温度",
                    },
                    {
                        "id": "w-1",
                        "text": "蚊媒数量",
                    },
                    {
                        "id": "w-2",
                        "text": "候鸟数量",
                    },
                    {
                        "id": "wnv",
                        "text": "WNV风险程度",
                    }
                ],
                "lines": [
                    {
                        "from": "a",
                        "to": "a-1"
                    },
                    {
                        "from": "a",
                        "to": "a-2"
                    },
                    {
                        "from": "b",
                        "to": "b-1"
                    },
                    {
                        "from": "b",
                        "to": "b-2"
                    },
                    {
                        "from": "c",
                        "to": "c-1"
                    },
                    {
                        "from": "c",
                        "to": "c-2"
                    },
                    {
                        "from": "a-1",
                        "to": "w"
                    },
                    {
                        "from": "a-2",
                        "to": "w"
                    },
                    {
                        "from": "b-1",
                        "to": "w"
                    },
                    {
                        "from": "b-2",
                        "to": "w"
                    },
                    {
                        "from": "c-1",
                        "to": "w"
                    },
                    {
                        "from": "c-2",
                        "to": "w"
                    },
                    {
                        "from": "w",
                        "to": "w-1"
                    },
                    {
                        "from": "w",
                        "to": "w-2"
                    },
                    {
                        "from": "w-1",
                        "to": "wnv"
                    },
                    {
                        "from": "w-2",
                        "to": "wnv"
                    }
                ]
            }
            // 以上数据中的node和link可以参考"Node节点"和"Link关系"中的参数进行配置
            // this.$refs.graphRef.setJsonData(jsonData, (graphInstance) => {
            //     // Called when the relation-graph is completed
            // })
        },
        onNodeClick(nodeObject, $event) {
            console.log('onNodeClick:', nodeObject)
        },
        onLineClick(lineObject, $event) {
            console.log('onLineClick:', lineObject)
        }
    }
}
</script>
<style lang="scss" scoped>
    .title{
        font-weight: bold;
        font-size: 30px;
        width: 100%;
        height: 100px;
        display: flex;
        align-items: center;
        justify-content: center;
    }
    .main-box{
        height: 100%;
        width: 100%;
    }
</style>
